<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="外协申请" name="access">
<!--        <application @row-click="handleApplicationRowClick" />-->
        <application
          :app-id="filterAppId"
          @row-click="handleApplicationRowClick"
          ref="applicationComponent"
        />
      </el-tab-pane>
      <el-tab-pane label="外协人员" name="person">
        <person :filter-app-id="filterAppId"  ref="personComponent"
        />
      </el-tab-pane>
<!--      <el-tab-pane label="审批" name="person1">-->
<!--        <detail :isTodo="procInsQuery.isTodo" :appId="procInsQuery.appId" :procInsId="procInsQuery.procInsId" :taskId="procInsQuery.taskId" :processed="procInsQuery.processed"/>-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script>
import Application from './access/index.vue'
import Person from './person/index.vue'
import Detail from '@/views/workflow/work/detail.vue'

export default {
  name: 'OutsourcingTabs',
  components: {
    Application,
    Person,
    Detail
  },
  props: {

  },
  data() {
    return {
      activeName: 'access',
      filterAppId: null,
      isTodo: 0,
      procInsQuery:{},
      processFormList: [],
    };
  },
  created() {
    // console.log("111111:{}",this.$route.query)
    let {procInsId, taskId, processed,appId,isTodo} = this.$route.query;
    // 将解构的值赋值给 procInsQuery 对象
    this.procInsQuery = {
      procInsId,
      taskId,
      processed,
      appId,
      isTodo
    };
    // 如果有appId参数，设置到filterAppId
    if (appId) {
      this.filterAppId = appId;
    }
    if (procInsId != null && taskId != null && processed != null){
      this.activeName = "person1";
    }
    if (isTodo === 1){
      this.isTodo = isTodo;
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log('切换到标签页:', tab.name);
      switch (tab.name){
        case "access":
          this.$refs.applicationComponent.appFlash();
          break;
        case "person":
          this.$refs.personComponent.personFlash();
          break;
      }
    },
    // 处理申请表行点击事件
    handleApplicationRowClick(row) {
      // console.log('父组件监听到 row-click', row);
      // 设置筛选的申请单ID
      this.filterAppId = row.id;

      // 切换到人员标签页
      this.activeName = 'person';
      // 等待标签页切换完成后刷新人员列表
      this.$nextTick(() => {
        if (this.$refs.personComponent) {
          // 触发人员组件重新加载数据
          this.$refs.personComponent.refreshList();
          // console.log("出发了refresh")
        }
      });
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
</style>
